import React from 'react';
import styles from './index.less';
import { Button } from 'antd';
import { connect, Helmet } from 'umi';
import { v1 as uuidv1 } from 'uuid';
import { vesselTest, vesselrReadTemplate } from '@/network/api/commonApi';

import Form2 from './Form2';

// 随机颜色
var getRandomColor = function() {
  return (
    'rgb(' +
    Math.round(Math.random() * 255) +
    ',' +
    Math.round(Math.random() * 255) +
    ',' +
    Math.round(Math.random() * 10) +
    ')'
  );
};

// 后端返回的数据结构
// var data = {
//   vesselReference: 'DFGLM80',
//   vesselDirection: 0,
//   vesselStartTime: '2021-09-23 00:00:00',
//   vesselEndTime: '2021-09-24 00:00:00',
//   craneWorkList: [
//     {
//       bay: '30',
//       totalWiCount: 10,
//       workQueueList: [
//         {
//           craneId: '1',
//           bay: '30',
//           workInstructionCount: 18,
//           endWorkTime: '2021-09-23 03:08:00',
//           startWorkTime: '2021-09-23 02:29:00',
//         },

//         {
//           craneId: '1',
//           bay: '30',
//           workInstructionCount: 18,
//           endWorkTime: '2021-09-23 14:08:00',
//           startWorkTime: '2021-09-23 06:29:00',
//         },
//       ],
//     },

//     {
//       bay: '40',
//       totalWiCount: 10,
//       workQueueList: [
//         {
//           craneId: '1',
//           bay: '40',
//           workInstructionCount: 18,
//           endWorkTime: '2021-09-23 03:08:00',
//           startWorkTime: '2021-09-23 02:29:00',
//         },

//         {
//           craneId: '1',
//           bay: '40',
//           workInstructionCount: 23,
//           endWorkTime: '2021-09-23 14:08:00',
//           startWorkTime: '2021-09-23 06:29:00',
//         },
//       ],
//     },

//     {
//       bay: '50',
//       totalWiCount: 10,
//       workQueueList: [
//         {
//           craneId: '1',
//           bay: '50',
//           workInstructionCount: 18,
//           endWorkTime: '2021-09-23 03:08:00',
//           startWorkTime: '2021-09-23 02:29:00',
//         },

//         {
//           craneId: '1',
//           bay: '50',
//           workInstructionCount: 23,
//           endWorkTime: '2021-09-23 14:08:00',
//           startWorkTime: '2021-09-23 06:29:00',
//         },
//       ],
//     },

//     {
//       bay: '60',
//       totalWiCount: 10,
//       workQueueList: [
//         {
//           craneId: '1',
//           bay: '60',
//           workInstructionCount: 18,
//           endWorkTime: '2021-09-23 03:08:00',
//           startWorkTime: '2021-09-23 02:29:00',
//         },

//         {
//           craneId: '1',
//           bay: '60',
//           workInstructionCount: 23,
//           endWorkTime: '2021-09-23 20:08:00',
//           startWorkTime: '2021-09-23 14:29:00',
//         },
//       ],
//     },
//   ],
// };

@connect(({}) => ({}))
export default class extends React.Component {
  color = {};
  state = {
    data: null,
  };
  componentDidMount = async () => {
    this.init();
  };
  init = async () => {
    var rs = await vesselTest();
    if (rs.code != 200) return;
    this.color = {};
    this.setState({ data: rs.result }, () => {
      this.initGanttChart();
    });
  };
  getColor = craneId => {
    if (!craneId) return getRandomColor();
    if (!this.color[craneId]) {
      this.color[craneId] = getRandomColor();
    }
    return this.color[craneId];
  };
  initGanttChart = () => {
    const { data } = this.state;
    var startTime = new Date(data.vesselStartTime).getTime();
    var endTime = new Date(data.vesselEndTime).getTime();

    // 内容数据
    var list = [];
    data.craneWorkList.forEach((item, i) => {
      list.push({
        name: `贝位 ${item.bay}  任务量 ${item.totalWiCount}`,
        taskName: '选址及装修',
        id: item.bay.toString(),
        color: getRandomColor(),
      });
      item.workQueueList.forEach(ite => {
        list.push({
          name: `桥吊 ${ite.craneId}  任务量 ${ite.workInstructionCount}`,
          taskName: '选址及装修',
          id: uuidv1(),
          start: new Date(ite.startWorkTime).getTime(),
          end: new Date(ite.endWorkTime).getTime(),
          parent: item.bay.toString(),
          color: this.getColor(ite.craneId),
        });
      });
    });

    // THE CHART
    Highcharts.ganttChart('container', {
      title: {
        text: '甘特图测试例子',
      },
      xAxis: {
        currentDateIndicator: true,
        min: startTime,
        max: endTime,
      },
      plotOptions: {
        gantt: {
          pathfinder: {
            type: 'simpleConnect',
          },
        },
      },
      series: [{ data: list }],
      // 把图竖过来
      // chart: {
      //   inverted: true,
      //   plotBorderWidth: 1
      // },
      // xAxis: [{
      //   opposite: false,
      // }, {
      //   opposite: false
      // }],
      // yAxis: {
      //   uniqueNames: true,
      //   opposite: true
      // },
      // plotOptions: {
      //   gantt: {
      //     pathfinder: {
      //       type: 'simpleConnect',
      //     },
      //   },
      // },
     
    });
  };
  render() {
    const { data } = this.state;
    return (
      <div>
        <Helmet>
          <title>甘特图</title>
        </Helmet>
        <div>
          <Form2 />
        </div>
        <div className={styles.buttons}>
          <Button
            type="primary"
            onClick={() => {
              this.init();
            }}
          >
            刷新
          </Button>
        </div>
        <div className={styles.cont}>
          <div className={styles.left}>
            {data && (
              <>
                {data.vesselDirection == 0 ? (
                  <div className={styles.text}>
                    <div className={styles.textChild}>
                      {data.vesselReference}
                    </div>
                    <div className={styles.triangle}></div>
                  </div>
                ) : (
                  <div className={styles.text2}>
                    <div className={styles.textChild}>
                      {data.vesselReference}
                    </div>
                    <div className={styles.triangle}></div>
                  </div>
                )}
              </>
            )}
          </div>
          <div id="container" style={{ flex: '1' }}></div>
        </div>
      </div>
    );
  }
}
